<template>
  <div>
    <div
      ref="code"
      class="QRCodecomtent"
      style="height: 418px; background: #ffffff"
    >
      <div class="ewmboxt" style="color: #000000">
        <div
          class="ewmbox"
          style="font-size: 20px; font-weight: bold; color: #000000"
        >
          ID:{{ qrcodedata.gtel }}
        </div>
        <div
          v-for="(item, index) in qrcodedata.code0"
          :key="index"
          class="ewmbox"
        >
          <div class="qrbox">
            <vue-qr
              :correct-level="0"
              :logo-corner-radius="0"
              :logo-src="item.src"
              :margin="0"
              :size="150"
              :text="item.text"
            />
          </div>
          <span class="tdbox gtel4id">ID:{{ gtel4 }}</span>
        </div>
      </div>
      <div class="ewmboxt" style="color: #000000">
        <div
          class="ewmbox"
          style="font-size: 20px; font-weight: bold; color: #000000"
        >
          ID:{{ qrcodedata.gtel }}
        </div>
        <div
          v-for="(item, index) in qrcodedata.code1"
          :key="index"
          class="ewmbox"
        >
          <div class="qrbox">
            <vue-qr
              :correct-level="0"
              :logo-corner-radius="0"
              :logo-src="item.src"
              :margin="0"
              :size="150"
              :text="item.text"
            />
          </div>
          <span class="tdbox gtel4id">ID:{{ gtel4 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import vueQr from 'vue-qr/src/packages/vue-qr.vue'
  import num1 from '@/assets/img/1.png'
  import num2 from '@/assets/img/2.jpg'
  import num3 from '@/assets/img/3.jpg'
  import num4 from '@/assets/img/4.jpg'
  import num5 from '@/assets/img/5.jpg'
  import num6 from '@/assets/img/6.jpg'
  import num7 from '@/assets/img/7.jpg'
  import num8 from '@/assets/img/8.jpg'
  import num9 from '@/assets/img/9.jpg'
  import num10 from '@/assets/img/10.jpg'
  import num11 from '@/assets/img/11.jpg'
  import num12 from '@/assets/img/12.jpg'
  import num13 from '@/assets/img/13.jpg'
  import num14 from '@/assets/img/14.jpg'
  import num15 from '@/assets/img/15.jpg'
  import num16 from '@/assets/img/16.jpg'
  import num17 from '@/assets/img/17.jpg'
  import num18 from '@/assets/img/18.jpg'
  import num19 from '@/assets/img/19.jpg'
  import num20 from '@/assets/img/20.jpg'
  let nums = [
    num1,
    num2,
    num3,
    num4,
    num5,
    num6,
    num7,
    num8,
    num9,
    num10,
    num11,
    num12,
    num13,
    num14,
    num15,
    num16,
    num17,
    num18,
    num19,
    num20,
  ]

  export default {
    name: 'Qrcodedown',

    components: {
      vueQr,
    },
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        nums: nums,
        qrcodedata: {
          code0: [],
        },
      }
    },
    computed: {
      gtel4() {
        return this.qrcodedata.gtel.slice(-4, this.qrcodedata.gtel.length)
      },
      ewms() {
        // data
        let r = [[], []]
        let glsone = Math.ceil(this.qrcodedata.gls / 2)
        glsone = glsone - Math.ceil(this.glsi / 2)
        if (glsone > 5) {
          glsone = 5
        }
        for (let i = 1; i <= glsone; i++) {
          let zi = i + this.glsi
          r[0].push({
            src: this['num' + zi],
            text: DataURL3 + '/CheWeb?gtel=' + this.gtel + '_' + zi,
          })
          let j = glsone + zi
          if (j <= this.gls) {
            r[1].push({
              src: this['num' + j],
              text: DataURL3 + '/CheWeb?gtel=' + this.gtel + '_' + j,
            })
          }
        }
        this.qrcodedownfn()
        return r
      },
    },
    watch: {},
    created() {
      console.log(this.$z)
      // this.qrcodedownfn(this.data.gtel)
    },
    updated() {},

    methods: {
      // download({ gtel, gls = 10 }, fn) {
      //   this.qrcodedownfn(gtel, fn)
      // },
      async download({ gtel, gls = 10 }, callback = () => {}, page = 0) {
        this.qrcodedata.gtel = gtel
        this.qrcodedata.code0 = []
        this.qrcodedata.code1 = []
        let min = page * 10 + 1
        let max = (page + 1) * 10
        if (min > gls) {
          callback()
          return
        }
        max = max > gls ? gls : max

        for (let i = min; i <= max; i++) {
          let zi = i
          let codearray = {
            src: this.nums[zi - 1],
            text: this.$z.qrcodestr(gtel, zi),
          }
          if (i % 2 == 1) {
            this.qrcodedata.code0.push(codearray)
          } else {
            this.qrcodedata.code1.push(codearray)
          }
        }
        setTimeout(() => {
          let mc = gtel
          if (gls > 10) {
            mc += `(${min}_${max})`
          }

          this.$z.zhtml2canvas(this.$refs.code, mc).then(() => {
            page++
            this.download({ gtel, gls }, callback, page)
          })
        }, 1000)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .QRCodecomtent {
    position: fixed;
    top: -2000px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ewmboxt {
    display: flex;
    height: 202px;
  }

  .ewmbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 202px;
    height: 202px;
    padding-top: 10px;
    margin: 0 7px;
    color: #000000;
  }

  .tdbox {
    line-height: 20px;
  }

  .qrbox {
    width: 150px;
    /*flex: 1;*/
    height: 150px;
  }

  .ewmboxt .ewmbox:nth-child(1) {
    margin-left: 0;
  }

  .ewmboxt .ewmbox:nth-last-child(1) {
    margin-right: 0;
  }

  .gtelid {
    font-size: 20px;
    font-weight: bold;
  }

  .gtel4id {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
  }
</style>
